<template>
  <div ref="print" style="width:100%; margin: 0 auto;" v-show="isPreview">
    <div class="print-wrap-body" v-for="(table, _index) in list" :key="_index">
      <table style="border-bottom:1px solid #e5e5e5;font-size:12px">
        <tr v-for="(rows, index) in table.layout" :key="index">
          <td
            v-for="(item, index2) in rows"
            :key="index2"
            :colspan="setColspan(item)"
            :rowspan="setRowspan(item)"
            :style="{
              'background-color': hasLabel(item,index2) ? (!hasQR(item) ? '#f1f1f1' : 'none') : '',
              'font-weight': 'bold',
              'text-align': index === 0 ? 'center' : '',
              'padding': '8px',
              'border-top': '1px solid #e5e5e5',
              'border-left': '1px solid #e5e5e5',
            }"
          >
            <!-- 二维码 -->
            <!-- <div style="text-align:center" v-if="hasQR(item)">
              <img style="width:167px;height:167px" :src="setColValue(item)" alt="二维码" />
            </div> -->
            <!-- 字段 -->
            {{ setColValue(item) }}
             <!-- <span v-else>
              {{ setColValue(item) }}
            </span>  -->
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import moment from 'moment';
export default {
  name: 'templateSettleBils',
  props: {
    //传值 从上一页
    data: {
      type: Object,
      required: true,
      default() {
        return {};
      }
    },
    isPreview: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      nowTime: moment().format('YYYY-MM-DD'),
      list: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.handle();
    this.$nextTick(function() {
      //必须写
      console.log('this.list 渲染数据 =>', this.list);

      this.$emit('onPrintTable', this.$refs.print.innerHTML);
    });
    if (this.isPreview) {
      this.fillInToDom();
    }
  },
  methods: {
    fillInToDom() {
      this.isPreview = true;
    },
    // 判断是否为对象
    hasObj(obj){
      return Object.prototype.toString.call(obj) === '[object Object]'
    },
    /**
     * 获取对象中的指定key的val
     * @param  {Object} obj
     * @param  {String} key
     */
    getObjVal(obj,key){
      let value = '';
      this.hasObj(obj) && (value = obj[key]);
      return value
    },
    hasQR(item){
      return item&&item.isQR
    },
    hasLabel(item,index) {
      const num = index + 1;
      return num % 2 > 0 || this.getObjVal(item,'isTitle');
    },
    // 设置列 cols
    setColspan(item) {
      // 没有设置col，默认1列
      let num = this.getObjVal(item,'col') || 1;
      // 二维码占4列
      this.getObjVal(item,'isQR') && (num = '4');
      return num;
    },
    // 设置行 rows
    setRowspan(item) {
      // 没有设置row，默认1行
      let num = this.getObjVal(item,'row') || 1;
      return num;
    },
    // 取值
    setColValue(item) {
      let value = ''
      if(this.hasObj(item)){
        value = item.value ? item.value:' '
      }else{
        value = item
      }
      return value
    },
    handle() {
      const array = this.data.rows || [];
      array.forEach(item => {
        console.log('item 渲染数据 ========================================>', JSON.stringify(item));
        this.list.push({
          layout: [
            [
              {isTitle:true, col: 8, value: '索赔费用结算通知单' },
            ],
            ['服务站号', item.dealerCode, '服务站简称', item.dealerName,'结算月份',item.settleDate,'结算编号',item.settleNo],
            [
              {isTitle:true, col: 8, value: item.dealerName },
            ],
            [
              {isTitle:true, col: 8, value: '我站的保养、服务活动、索赔单据、经贵公司审核,材料费结算情况如下:' },
            ],
            [{ col: 1, value: '项目' }, { col: 2, value: '售前保修' },{ col: 2, value: '正常保修' },{ col: 1, value: '技术升级' },
             { col: 1, value: '配件保修' },{ col: 1, value: '精品保修' }],
             [{ col: 1, value: '数量(份)' }, { col: 2, value: item.preClaim },{ col: 2, value: item.normalClaim },{ col: 1, value: item.technologicalUpgrade },
             { col: 1, value: item.partClaim },{ col: 1, value: item.preClaim }],
             [{ col: 1, value: '项目' }, { col: 2, value: '首保' },{ col: 2, value: 'PDI' },{ col: 1, value: '服务活动' },
             { col: 1, value: '善意索赔' },{ col: 1, value: '合计' }],
             [{ col: 1, value: '数量(份)' }, { col: 2, value: item.firstMaintenance },{ col: 2, value: item.pdi },{ col: 1, value: item.serviceAction },
             { col: 1, value: item.preClaim },{ col: 1, value: item.preClaim }],
             ['项目', '保修材料费', '升级材料费', '精品材料费','首保材料费','服务活动材料费','善意索赔材料费','误判金额'],
             ['金额(元)', item.labourAmount, item.upgradeCount, item.preClaim,item.firstMaintenanceCount,item.serviceCount,item.goodWillClaimCount,item.preClaim],
             [{ col: 1, value: '合计' }, { col: 2, value: item.preClaim },{ col: 1, value: '大写' },{ col: 4, value: item.preClaim }],
             ['开票金额', item.preClaim, '发票类型', item.preClaim,'结算比例',item.preClaim,'赔付金额',item.preClaim],
             [
              {isTitle:true, col: 8, value: '具体明细详见附件。' },
             ],
             [
              {isTitle:true, col: 8, value: '发票开具金额如下:' },
             ],
             ['序号', '发票批号', '发票号码', '发票金额','不含税金额','税额','合计','开票日期'],
             ['', '', '','','','','',''],
             ['', '', '','','','','',''],
             ['', '', '','','','','',''],
             ['', '', '','','','','',''],
             [{ col: 3, value: '服务站索赔员:' }, { col: 2, value: '财务:' },{ col: 3, value: '站长:' }],
             [{ col: 2, value: ' ' }, { col: 2, value: '(财务专用章)' },{ col: 4, value: ' ' }],
             [{ col: 5, value: ' ' }, { col: 3, value: '年  月  日' }],
            // ['车辆车系', item.seriesId, '索赔单号', item.claimNo, { isQR: true, col: 4, row: 5, value: item.codeUrl }],
            // ['车辆车型', item.model, '发动机号', item.engineNo],
            // ['VIN码', { col: 3, value: item.vin }],
            // ['电池编号', { col: 3, value: item.evNo }],
            // ['生产日期', { col: 3, value: item.prodDate }],
            // ['销售日期', item.saleDate, '行驶里程', item.mileage, '旧件代码', { col: 3, value: item.partCode }],
            // ['维修日期', item.repairDate, '索赔类型', item.type, '旧件名称', { col: 3, value: item.partsName }],
            // ['故障现象', { col: 3, value: item.faultAppear }, '旧件数量', item.number, '供应商编码', item.supCode]
          ]
        });
      });
    }
  }
};
</script>
<style scoped></style>
